<template>
  <div class="container">
    <v-chart :option="options"> </v-chart>
    <span class="title">{{ title }}{{ total }}</span>
  </div>
</template>
<script>
export default {
  name: "LineChart",
  data() {
    return {
      defaultXAxis: {
        // 坐标轴的数据
        data: [],
        // 坐标轴线的属性
        axisLine: {
          // 箭头设置
          symbol: ["none", "arrow"],
          // 箭头大小 x y
          symbolSize: [6, 8]
        },
        axisTick: {
          show: false //不显示刻度
        }
      },
      defaultYAxis: {
        // 坐标轴线的属性
        axisLine: {
          show: true,
          // 箭头设置
          symbol: ["none", "arrow"],
          // 箭头大小 x y
          symbolSize: [6, 8]
        },
        //  分割线的属性
        splitLine: {
          show: false
        }
      },
      defaultSeries: {
        type: "line",
        data: [],
        itemStyle: {
          normal: { label: { show: true }, color: "#1890ff" }
        },
        lineStyle: {
          color: "#1890ff"
        }
      }
    };
  },
  props: {
    // x轴的属性
    xAxis: {
      type: Object,
      default: () => ({})
    },
    // y轴的属性
    yAxis: {
      type: Object,
      default: () => ({})
    },
    // 渲染数据的属性
    series: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ""
    },
    total: {
      default: 0
    }
  },
  computed: {
    options: function() {
      return {
        xAxis: Object.assign(this.defaultXAxis, this.xAxis),
        yAxis: this.defaultYAxis,
        series: Object.assign(this.defaultSeries, this.series)
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
